@import '../../style/color_theme.sass'

.system_wrapper
    width: 100%
    height: 100%
    background: url('../../Image/bg.jpg') !important
    background-size: 100% 100% !important


    #root
        height: 100%

    .swiper-wrapper
        transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 1s

    .swiper-slide
        color: $color_ffff
        font-size: 60px
        text-align: center
        height: 100%
        min-height: 500px
    
    .swiper_button
        background: rgba(0, 0, 0, .35)
        width: 90px
        height: 90px
        border-radius: 100%
        transition: background 1s, box-shadow 1s, color 1s
        color: $color_ffff
        text-align: center
        line-height: 90px
        font-size: 53px

        &:hover
            background: rgba(255, 255, 255, 0.7)
            box-shadow: 0 0 8px rgba(255, 255, 255, .6)
            transition: background 1s, box-shadow 1s, color 1s
            color: rgba(0, 0, 0, 0.8)

    .customer_button_next
        &::before
            margin-right: -8px

    .customer_button_prev
        &::before
            margin-left: -8px

    .customer-pointer
        bottom: 0px !important
        span
            display: inline-block
            width: 40px
            height: 6px
            border-radius: 6px
            margin-right: 6px
        
        .swiper-pagination-bullet
            background: $color_ffff
            opacity: 1
        
        .swiper-pagination-bullet-active
            background: $color_35ab

    .system_list_items
        display: flex
        width: 94%
        margin: 0 auto
        padding: 2% 120px 30px 120px
        justify-content: center
        box-sizing: border-box
        flex-wrap: wrap
        li
            flex: 1
            min-width: 19%
            max-width: 300px
            height: 160px
            margin-right: 30px
            font-size: 20px
            margin-bottom: 40px
            background: linear-gradient(to bottom, #f6685d, #f44336)
            border-radius: 10px
            box-shadow:  3px 3px 5px rgba(0, 0, 0, .5)

            &:nth-child(2)
                background: linear-gradient(to bottom, #8933a2, #6c008b)

            &:nth-child(3)
                background: linear-gradient(to bottom, #5cd0ef, #24c0e9)

            &:nth-child(4)
                margin-right: 0
                background: linear-gradient(to bottom, #f54875,#f31a52 )
                
            &:nth-child(8)
                margin-right: 0
                background: linear-gradient(to bottom, #f8cd69, #f6c144 )
            
            &:nth-child(5)
                background: linear-gradient(to bottom, #3389c9, #006bbb)

            &:nth-child(6)
                background: linear-gradient(to bottom, #ff8033, #ff6000)

            &:nth-child(7)
                background: linear-gradient(to bottom, #6141eb, #3a12e6 )
                
            a
                display: block
                width: 100%
                height: 100%
                line-height: 160px
                background-image: url('../../Image/texture.png')
                color: $color_ffff
                text-shadow: 2px 2px 3px rgba(0, 0, 0, .5)
                position: relative
                overflow: hidden

                &::before
                    content: ' '
                    position: absolute
                    width: 140px
                    height: 140px
                    border-radius: 100%
                    background: $color_ffff
                    opacity: 0.10
                    top: -20px
                    right: -20px
                    transition: right 0.9s, top 0.3s
                &::after
                    content: ' '
                    position: absolute
                    width: 100px
                    height: 100px
                    border-radius: 100%
                    background: $color_ffff
                    opacity: 0.10
                    bottom: -20px
                    right: -20px
                    transition: right 0.9s, top 0.3s

                &:hover
                    &::before
                        top: -40px
                        right: 10px
                        transition: right 0.9s, top 0.3s
                    &::after
                        bottom: -30px
                        right: 10px
                        transition: right 0.9s, top 0.3s
                    

            
    